<template>
	<view class="bg-gray1">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">个人信息</block>
		</cu-custom>
		<view class="u_content">
			<view class="flex-column-center" style="width: 100%;">
				<image :src="userInfo.headimgUrl" mode="" class="h_Img"></image>
				<button class="u_btn u_btn1" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" :disabled="loading"
					v-if="version=='1'">
					更新
				</button>
				<button class="u_btn u_btn1" @click="preUpdate" v-if="version=='2'" :loading="preLoading"
					:disabled="preLoading">更新</button>
			</view>
			<view class="uItem" style="margin-top: 40px;" v-if="sType!='yc'">
				<view class="text-black flex align-center">
					<view class="cuIcon-profile"></view>
					<view class="u_title">昵称</view>
					<!-- <text class="u_text">{{userInfo.nickName?userInfo.nickName:''}}</text> -->
					<view class="u_text">
						<input type="text" disabled :value="userInfo.nickName?userInfo.nickName:''"
							v-if="version=='2'"></input>
						<input type="nickname" :disabled="!showFocus" @blur="getName" v-model="nickName"
							v-if="version=='1'" :focus="showFocus"></input>
					</view>
				</view>
				<view class="" style="position: relative;">
					<button class="u_btn u_btn3" :disabled="loading" v-if="version=='1'"
						@click="showFocus=true">更新</button>
					<button class="u_btn u_btn3" @click="preUpdate" v-if="version=='2'" :loading="preLoading"
						:disabled="preLoading">更新</button>
				</view>
			</view>
			<view class="uItem" v-if="sType!='yc'">
				<view class="text-black">
					<text class="cuIcon-phone"></text>
					<text class="u_title ">手机</text>
					<text class="u_text">{{userInfo.phone?userInfo.phone:''}}</text>
				</view>
				<button class="u_btn u_btn3" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					:disabled="loading">更新</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api';

	export default {
		name: 'user_info',
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				userInfo: uni.getStorageSync('user_info') ? uni.getStorageSync('user_info') : {},
				loading: false,
				nickName: '',
				version: '',
				preLoading: false,
				showFocus: false,
				sType: null, // 来源
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			this.version = options.v ? options.v : '1'
			this.sType = options.sType || null
		},
		onShow() {
			this.nickName = this.userInfo.nickName ? this.userInfo.nickName : ''
		},
		methods: {
			// 更新头像
			onChooseAvatar(e) {
				if (e.detail && e.detail.avatarUrl) {
					console.log(e.detail && e.detail.avatarUrl)
					uni.uploadFile({
						url: 'https://mall.ljcds.cn/mallapi/ma/file/upload?fileType=image&dir=lijian/',
						filePath: e.detail.avatarUrl,
						name: 'file',
						success: res => {
							if (res.data) {
								this.upDateUserInfo({
									headimgUrl: JSON.parse(res.data).link
								})
							}
						}
					})
				}
			},
			// 更新昵称
			getName(e) {
				this.$nextTick(() => {
					if (this.nickName) {
						this.upDateUserInfo({
							nickName: this.nickName
						})
						this.showFocus = false
					}
				})
			},
			// 更新手机号码
			getPhoneNumber(e) {
				if (e.detail.code) {
					api.changeMobile({
						userId: this.userInfo.id,
						encryptedData: e.detail.code,
						iv: e.detail.iv
					}).then(res => {
						if(res.data&&res.data=='手机号一致'){
							uni.showToast({
								title: '与之前绑定手机号一致',
								duration: 1000
							})
						}else{
							uni.showToast({
								title: '更新成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/user/user-center/index'
								})
							}, 1000)
						}						
					})
				}
			},
			// 更新用户信息
			upDateUserInfo(data) {
				this.loading = true
				data.userId = this.userInfo.id
				api.updateMaNick(data).then(res => {
					uni.showToast({
						title: '更新成功',
						icon: 'success',
						duration: 1000
					})
					setTimeout(() => {
						if(this.sType!='yc') {
							uni.reLaunch({
								url: '/pages/user/user-center/index'
							})
						} else {
							// 云仓
							var pages = getCurrentPages(); // 获取页面栈
							var prevPage = pages[pages.length - 2]; // 上一个页面
							prevPage.$vm.reLoadUser();
							uni.navigateBack({
								delta: 1
							});
						}						
					}, 1000)
				}).finally(() => {
					this.loading = false
					this.preLoading = false
				})
			},
			// 低版本
			preUpdate() {
				this.preLoading = true
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别", // 不写不弹提示框
					success: res => {
						this.upDateUserInfo({
							headimgUrl: res.userInfo.avatarUrl,
							nickName: res.userInfo.nickName
						})
					},
					fail: res => {
						//拒绝授权
						uni.showToast({
							title: '您拒绝了授权',
							icon: 'none'
						})
						this.preLoading = false
						return;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.u_content {
		background-color: #fff;
		min-height: 100vh;
		padding: 60rpx 30rpx 0 30rpx
	}

	.u_content .h_Img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}

	.u_content .uItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #D9D9D9;
		height: 100rpx;
		font-size: 28rpx;
	}

	.u_content .uItem .u_title {
		/* width: 100rpx; */
		color: #333;
		font-weight: 700;
		border-right: 1rpx solid rgba(0, 0, 0, .2);
		padding-right: 15rpx;
		margin-left: 10rpx;
	}

	.u_content .uItem .u_text {
		margin-left: 15rpx;
		color: #4E5969;
	}

	.u_btn {
		color: #4E5969;
		background-color: #F7F8FA;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 120rpx;
	}

	.u_btn1 {
		margin-top: 20rpx;
	}

	.u_btn2 {
		text-align: center;
		border-radius: 10rpx;
		position: absolute;
		top: 0;
		z-index: 10;
		background-color: transparent;
		color: transparent;
		caret-color: #F7F8FA;
	}

	.u_btn3 {
		margin: 0;
	}
</style>